import {Button, Card, Tag, Tooltip} from "antd";
import Link from "next/link";
import {LikeOutlined} from "@ant-design/icons";


// 博客列表的数据
const posts = [
    {
        id: 1,
        title: '人工智能在企业中的应用',
        intro: '探讨AI如何改变现代企业的运营方式，从自动化到决策支持，AI正在重塑商业格局...',
        category: '技术',
        date: '2024-03-15',
        author: '张三',
        tags: ['AI', '企业转型', '技术创新'],
        likes: 123,
        views: 4567
    },
    {
        id: 2,
        title: '数字化转型的关键步骤',
        intro: '了解企业数字化转型的必备要素，从战略规划到技术实施，打造数字化未来...',
        category: '商业',
        date: '2024-03-14',
        author: '李四',
        tags: ['数字化转型', '战略规划', '企业创新'],
        likes: 88,
        views: 3210
    },
    {
        id: 3,
        title: '远程工作的最佳实践',
        intro: '如何建立高效的远程工作团队，提升团队协作效率，保持团队凝聚力...',
        category: '管理',
        date: '2024-03-13',
        author: '王五',
        tags: ['远程工作', '团队管理', '工作效率'],
        likes: 66,
        views: 1988
    }
];

export default function PostList(){
    return (
        <div className="max-w-5xl mx-auto py-8 px-2">
            <h2 className="text-2xl font-bold mb-6">最新文章</h2>
            <div className="grid gap-6 md:grid-cols-2">
                {posts.map(post => (
                    <Card
                        key={post.id}
                        title={<Link href={`/posts/${post.id}`}>{post.title}</Link>}
                        extra={
                            <div style={{display: "flex", alignItems: "center", gap: 12}}>
                                <Tooltip title="点赞量">
                                    <span style={{display: "flex", alignItems: "center"}}>
                                        <LikeOutlined style={{marginRight: 4}}/>
                                        {post.likes}
                                    </span>
                                </Tooltip>
                                <Tooltip title="阅读量">
                                    <span style={{display: "flex", alignItems: "center"}}>
                                        <LikeOutlined style={{marginRight: 4}}/>
                                        {post.views}
                                    </span>
                                </Tooltip>
                            </div>
                        }
                        style={{borderRadius: 8}}
                        styles={{body: {minHeight: 100}}}
                    >
                        {/*概述*/}
                        <div className="mb-2 text-gray-600">{post.intro}</div>
                        {/*标签*/}
                        <div className="mb-2 flex flex-wrap gap-2">
                            {post.tags.map(tag => (
                                <Tag key={tag} color="blue">{tag}</Tag>
                            ))}
                        </div>
                        {/*底部信息*/}
                        <div className="flex justify-between items-center text-sm text-gray-500 mt-3">
                            <span>作者: {post.author} | {post.date}</span>
                            <Button type="link" size="small" href={`/posts/${post.id}`}>
                                阅读全文
                            </Button>
                        </div>
                    </Card>
                ))}
            </div>
        </div>
    )
}